<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>20 - 节点操作</title>
</head>
<body>
    <div>
        <p>段落</p>
        <span>span标签</span>
        <h1>标题</h1>
        <a href="">连接</a>
        <ul>
            <li>列表</li>
        </ul>
    </div>

    <div class="box"></div>

    <script>

        // 节点     在网页中任何一个标签, 标签中的文字, 标签中的属性, 空格, 回车换行 都叫节点

        // 和节点概念类似叫     元素

        // 节点操作      通过 js 操作网页中的标签, 网页中标签的文字, 标签的属性 ...
        //              本质上就是换了一种方式操作(获取)页面中的标签





        // A. 查找节点        获取标签

        // 1. 根据父节点(父元素)获取子节点(子元素)
        // 语法:
        // ☛   标签对象.children

        // 代码演示:
        let div = document.querySelector('div');
        let res = div.children;
        console.log(res);       // 得到一个数组



        // 2. 根据子元素获取父元素
        // 语法:
        // ☛   标签对象.parentNode     得到的结果不是数组, 不能遍历

        // 代码演示:
        let a = document.querySelector('a');
        let res1 =  a.parentNode;
        console.log(res1);      // 得到的结果是一个标签对象



        // 3. 获取标签的兄弟元素
        // 语法:
        // ☛   标签对象.nextElementSibling           下一个兄弟元素
        // ☛   标签对象.previousElementSibling       上一个兄弟元素 

        // 代码演示:
        let h1 = document.querySelector('h1');
        console.log(h1.nextElementSibling);
        console.log(h1.previousElementSibling);
        // 得到的结果不是数组,都是一个具体的标签对象





        // B. 增加节点      网页中本身没有标签节点(元素), 通过 js 的方式在网页中增加一个标签(创建一个标签)

        // 增加节点(创建元素)
        // 语法:
        // ☛   document.createElement(标签名)     创建一个标签元素 (节点)      有返回值, 返回的结果就是创建的标签对象
        // ☛   父容器标签对象.appendChild()       将创建的元素添加到指定的父容器中

        // 代码演示:
        // 要求:  在 body 标签中增加一个标题标签 (在 body 标签中创建一个标题标签)
        // 创建一个标题标签, 创建完标签后,返回值,返回的结果就是创建的标签
        let h2 = document.createElement('h2');
        let body = document.querySelector('body');
        // 将创建的 h2 标签添加到指定的父容器中
        body.appendChild(h2);                                   // 将节点添加到了父容器的末尾
        // 语法
        // ☛   父容器.insertBefore(要添加的节点, 目标节点);      // 将节点可以添加到某个节点的前面
        let div1 = document.querySelector('.box');
        let p = document.createElement('p');
            p.innerHTML = '我是通过js创建的一个段落'
            div1.insertBefore(p, div1.children[0]);






        // C. 删除节点      将标签从网页中删除, 不是隐藏
        // 语法:
        // ☛   父容器.removeChild(要被移除的元素)

        // 代码演示:
        // 将 div (box)从网页中删除
        let body1 = document.querySelector('body');
        let box = document.querySelector('.box');
        body1.removeChild(box);


    </script>
</body>
</html>